<template>
    <el-container>
      <!-- Header -->
      <el-header class="header">
        <el-row type="flex" justify="space-between" align="middle">
          <div class="logo">
            <img src="../../assets/images/logo.png" alt="Logo" />
            岳麓书院知识图谱
          </div>
          <el-menu
            :default-active="activeMenu"
            mode="horizontal"
            @select="horizontal"
            class="nav-menu"
          >
            <el-menu-item index="userManagement">用户管理</el-menu-item>
            <el-menu-item index="dataRetrieval">检索数据</el-menu-item>
            <el-menu-item index="dataManagement">管理数据</el-menu-item>
            <el-menu-item index="messageCenter">消息中心</el-menu-item>
          </el-menu>
        </el-row>
      </el-header>
      <el-container>
        <!-- Aside Sidebar -->
        <el-aside width="200px" class="aside">
          <el-menu
            :default-active="activeSubMenu"
            mode="vertical"
            @select="handleAsideSelect"
          >
            <el-menu-item index="ordinaryUser">
              <img
                src="../../assets/images/ord_user.png"
                alt="普通用户"
                class="menu-icon"
              />
              <template #title>
               <span>普通用户</span>
              </template>
            </el-menu-item>
            <el-menu-item index="advancedUser">
              <img
                src="../../assets/images/adv_user.png"
                alt="高级用户"
                class="menu-icon"
              />
              <template #title>
               <span>高级用户</span>
              </template>
            </el-menu-item>
            <el-menu-item index="feedbackRecord">
              <img
                src="../../assets/images/fedb_record.png"
                alt="反馈记录"
                class="menu-icon"
              />
              <template #title>
               <span>反馈记录</span>
              </template>
            </el-menu-item>
          </el-menu>
        </el-aside>
  
        <!-- Main Content -->
        <el-main class="main">
          <div v-if="selectedSection === 'ordinaryUser'">
            <!-- OrdinaryUser Management -->
            <div>
              <p>用户管理 / 普通用户</p>
            </div>
  
            <hr />
            <br />
  
            <div class="content-header">
              <el-form
                ref="ordUserManageFormRef"
                :model="ordUserManageForm"
                :rules="rules"
                class="ordUserManage-form"
              >
                <el-row :gutter="20">
                  <el-col :span="12">
                    <el-form-item label="用户名" prop="User">
                      <el-input
                        v-model="ordUserManageForm.User"
                        placeholder="请输入"
                        class="input"
                      ></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="账号" prop="Account">
                      <el-input
                        v-model="ordUserManageForm.Account"
                        placeholder="请输入"
                        class="input"
                      ></el-input>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-form-item label="手机号" prop="Phone">
                  <el-input
                    v-model="ordUserManageForm.Phone"
                    placeholder="请输入"
                    class="input"
                  ></el-input>
                </el-form-item>
              </el-form>
  
              <div class="actions">
                <el-button type="primary" @click="search" class="search-button">
                  查询
                </el-button>
                <el-button @click="reset" class="reset-button"> 重置 </el-button>
                <el-button @click="refresh" class="refresh-button">
                  刷新
                </el-button>
              </div>
            </div>
  
            <hr />
  
            <div class="button-container">
              <el-button type="primary" @click="create" class="create-button">
                + 新建
              </el-button>
              <el-button
                @click="bulkDelete"
                class="bulkDelete-button white-button"
              >
                批量删除
              </el-button>
              <el-button @click="bulkReset" class="bulkReset-button white-button">
                批量重置
              </el-button>
              <el-button
                @click="bulkAuthorization"
                class="bulkAuthorization-button white-button"
              >
                批量授权
              </el-button>
            </div>
  
            <div v-if="filteredMessages.length === 0" class="no-results">
              <p>未查询到此用户</p>
            </div>
  
            <div v-else>
              <el-table
                :data="paginatedMessages"
                @selection-change="handleSelectionChange"
                style="width: 100%"
              >
                <el-table-column type="selection" width="50"></el-table-column>
                <el-table-column prop="UserName" label="用户名"></el-table-column>
                <el-table-column prop="ID" label="账号"></el-table-column>
                <el-table-column prop="PhoneNum" label="手机号"></el-table-column>
                <el-table-column
                  prop="CreateDate"
                  label="创建时间"
                ></el-table-column>
                <el-table-column label="操作" width="200">
                  <template #default="scope">
                    <el-button
                      type="text"
                      @click="authorizeMessage(scope.row)"
                      class="bold-button"
                      >授权</el-button
                    >
                    <el-button
                      type="text"
                      @click="resetMessage(scope.row)"
                      class="bold-button"
                      >重置</el-button
                    >
                    <el-button
                      type="text"
                      @click="deleteMessage(scope.row)"
                      class="bold-button"
                      >删除</el-button
                    >
                  </template>
                </el-table-column>
              </el-table>
  
              <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-sizes="[5, 10, 20, 50]"
                :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="totalMessages"
              >
              </el-pagination>
            </div>
          </div>
        </el-main>
      </el-container>
      <el-dialog
        v-model="dialogVisible"
        title="新增"
        width="500"
        :before-close="handleClose"
      >
        <el-input
          v-model="addUserManageForm.UserName"
          style="max-width: 600px; margin-top: 15px"
          placeholder="请输入"
        >
          <template #prepend>用户名</template>
        </el-input>
        <el-input
          v-model="addUserManageForm.ID"
          style="max-width: 600px; margin-top: 15px"
          placeholder="请输入"
        >
          <template #prepend>帐号</template>
        </el-input>
        <el-input
          v-model="addUserManageForm.PhoneNum"
          style="max-width: 600px; margin-top: 15px"
          placeholder="请输入"
        >
          <template #prepend>手机号</template>
        </el-input>
        <!-- <span>新增</span> -->
        <template #footer>
          <div class="dialog-footer">
            <el-button @click="dialogVisible = false">取消</el-button>
            <el-button type="primary" @click="confimAdd"> 确认 </el-button>
          </div>
        </template>
      </el-dialog>
    </el-container>
  </template>
  
  <script setup lang="ts">
  import { ref, computed, reactive } from "vue";
  import { ElMessage, ElMessageBox } from "element-plus";
  import { tokenStore } from "../../store/token";
  import { userInfoStore } from "../../store/userInfo";
  
  const activeMenu = ref("userManagement");
  const activeSubMenu = ref("ordinaryUser");
  const selectedRows = ref([]);
  
  const userMessages = ref([
    {
      UserName: "123",
      ID: "001",
      PhoneNum: "130",
      CreateDate: "2024-09-01 10:15:23",
    },
    {
      UserName: "测试用户2",
      ID: "002",
      PhoneNum: "18683552277",
      CreateDate: "2024-10-02 13:23:43",
    },
  ]);
  
  const selectedSection = ref("ordinaryUser");
  const currentPage = ref(1);
  const pageSize = ref(10);
  
  const ordUserManageForm = reactive({
    User: "",
    Account: "",
    Phone: "",
  });
  const addUserManageForm = reactive({
    UserName: "",
    ID: "",
    PhoneNum: "",
    CreateDate: "",
  });
  
  const rules = {
    User: [{ required: false, message: "请输入用户名", trigger: "blur" }],
    Account: [{ required: false, message: "请输入账号", trigger: "blur" }],
    Phone: [{ required: false, message: "请输入手机号", trigger: "blur" }],
  };
  
  const filteredMessages = computed(() => {
    return userMessages.value.filter((user) => {
      return (
        (!ordUserManageForm.User ||
          user.UserName.includes(ordUserManageForm.User)) &&
        (!ordUserManageForm.Account ||
          user.ID.includes(ordUserManageForm.Account)) &&
        (!ordUserManageForm.Phone ||
          user.PhoneNum.includes(ordUserManageForm.Phone))
      );
    });
  });
  
  const totalMessages = computed(() => filteredMessages.value.length);
  
  const paginatedMessages = computed(() => {
    const start = (currentPage.value - 1) * pageSize.value;
    const end = start + pageSize.value;
    return filteredMessages.value.slice(start, end);
  });
  // console.log(paginatedMessages,'paginatedMessages');
  
  const horizontal = (index) => {
    activeMenu.value = index;
  };
  
  const handleAsideSelect = (index) => {
    activeSubMenu.value = index;
    selectedSection.value = index;
  };
  
  const search = () => {
    currentPage.value = 1; // 重置当前页为第一页
    console.log("Filtered Messages:", filteredMessages.value);
    console.log("Paginated Messages:", paginatedMessages.value);
  };
  
  const reset = () => {
    ordUserManageForm.User = "";
    ordUserManageForm.Account = "";
    ordUserManageForm.Phone = "";
    currentPage.value = 1; // 重置当前页为第一页
  };
  
  const refresh = () => {
    // 实现刷新逻辑
  };
  const dialogVisible = ref(false);
  const create = () => {
    dialogVisible.value = true;
  };
  const handleClose = (done: () => void) => {
    addUserManageForm.UserName = "";
    addUserManageForm.ID = "";
    addUserManageForm.PhoneNum = "";
    addUserManageForm.CreateDate = "";
    dialogVisible.value = false;
  };
  const confimAdd = () => {
    addUserManageForm.CreateDate = formatDate(new Date());
    userMessages.value.push({ ...addUserManageForm });
    console.log(userMessages.value, addUserManageForm, "userMessages.value");
  
    handleClose();
  };
  const formatDate = (date) => {
    const year = date.getFullYear();
    const month = String(date.getMonth() + 1).padStart(2, "0");
    const day = String(date.getDate()).padStart(2, "0");
    const hours = String(date.getHours()).padStart(2, "0");
    const minutes = String(date.getMinutes()).padStart(2, "0");
    const seconds = String(date.getSeconds()).padStart(2, "0");
    return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
  };
  interface Message {
    UserName: string;
    ID: string;
    PhoneNum: string;
    CreateDate: string;
  }
  
  // 选中项数组
  const selectedMessages = ref<Message[]>([]);
  
  // 处理选择项变化
  const handleSelectionChange = (selection: Message[]) => {
    selectedMessages.value = selection;
    console.log(selectedMessages.value, "selectedMessages.value");
  };
  const bulkDelete = () => {
    // 实现批量删除逻辑
    if (selectedMessages.value.length === 0) {
      ElMessage.warning("请选择要删除的项");
      return;
    }
  
    ElMessageBox.confirm("确定要删除选中的用户吗？", "提示", {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: "warning",
    })
      .then(() => {
        userMessages.value = userMessages.value.filter(
          (item) => !selectedMessages.value.includes(item)
        );
        ElMessage.success("删除成功");
        selectedMessages.value = []; // 清空选中项
      })
      .catch(() => {
        ElMessage.info("已取消删除");
      });
  };
  
  const bulkReset = () => {
    // 实现批量重置逻辑
  };
  
  const bulkAuthorization = () => {
    // 实现批量授权逻辑
  };
  
  const authorizeMessage = (row) => {
    // 实现单个授权逻辑
  };
  
  const resetMessage = (row) => {
    // 实现单个重置逻辑
  };
  
  const deleteMessage = (row) => {
    userMessages.value = userMessages.value.filter(
      (message) => message.ID !== row.ID
    );
    // 实现单个删除逻辑
  };
  
  const handleSizeChange = (newSize) => {
    pageSize.value = newSize;
  };
  
  // const getBoundingClientRect = (newPage) => {
  //   currentPage.value = newPage;
  // };
  </script>
  
  <style scoped>
  .logo {
    display: flex;
    align-items: center;
    font-weight: bold;
  }
  
  .logo img {
    width: 40px;
    margin-right: 10px;
  }
  
  .profile {
    text-align: center;
    padding: 20px 0;
  }
  
  .profile p {
    margin-top: 10px;
  }
  
  .content-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
  }
  
  .actions {
    display: flex;
    gap: 10px;
  }
  
  .header {
    border-bottom: 1px solid #dcdfe6;
  }
  
  .nav-menu {
    width: 1200px;
    display: flex;
  }
  
  .nav-menu .el-menu-item {
    padding: 0 100px;
  }
  
  .aside {
    border-right: 1px solid #dcdfe6;
  }
  
  .main {
    padding: 20px;
  }
  
  .el-pagination {
    margin-top: 20px;
    text-align: center;
  }
  
  .user-avatar {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 20px;
  }
  
  .user-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  
  .user-actions .el-button {
    width: auto;
  }
  
  .user-info-form {
    background-color: #f5f7fa;
    padding: 20px;
    border-radius: 4px;
  }
  
  .el-form-item {
    margin-bottom: 15px;
  }
  
  .el-input.is-disabled .el-input__inner {
    color: #606266;
  }
  
  .avatar-uploader .el-upload {
    border: 1px dashed var(--el-border-color);
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  
  .avatar-uploader .el-upload:hover {
    border-color: var(--el-color-primary);
  }
  
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    text-align: center;
  }
  
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
  
  .mt-4 {
    margin-top: 1rem;
  }
  
  .blue-button {
    background-color: blue;
    border-color: rgb(139, 139, 181);
    color: white;
  }
  
  .white-button {
    background-color: rgb(238, 231, 231);
    color: red;
    border-color: red; /* 可选：设置边框颜色 */
  }
  
  .button-container {
    display: flex;
    justify-content: flex-end; /* 将内容对齐到行的末尾 */
  }
  
  .bold-button {
    font-weight: bold;
  }
  
  .no-results {
    text-align: center;
    color: red;
    margin: 20px 0;
  }
  </style>
  



  <!-- <template>
    <el-container>
      <!-- Outer_Main Content -->
      <el-main class="outer_main">
        <div v-if="selectedSection === 'userManagement'">
          <!-- Aside Sidebar -->
          <el-aside width="200px" class="aside">
            <el-menu
              :default-active="activeSubMenu"
              mode="vertical"
              @select="handleAsideSelect"
            >
              <el-menu-item index="ordinaryUser">
                <img
                  src="../../assets/images/ord_user.png"
                  alt="普通用户"
                  class="menu-icon"
                />
                <template #title>
                  <span>普通用户</span>
                </template>
              </el-menu-item>
              <el-menu-item index="advancedUser">
                <img
                  src="../../assets/images/adv_user.png"
                  alt="高级用户"
                  class="menu-icon"
                />
                <template #title>
                  <span>高级用户</span>
                </template>
              </el-menu-item>
              <el-menu-item index="feedbackRecord">
                <img
                  src="../../assets/images/fedb_record.png"
                  alt="反馈记录"
                  class="menu-icon"
                />
                <template #title>
                  <span>反馈记录</span>
                </template>
              </el-menu-item>
            </el-menu>
          </el-aside>
          <!-- Inner_Main Content -->
          <el-main class="userManagement_main">
            <div v-if="selectedSection === 'ordinaryUser'">
              <!-- OrdinaryUser Management -->
              <div>
                <p>用户管理 / 普通用户</p>
              </div>
              <hr />
              <br />
  
              <div class="content-header">
                <el-form
                  ref="ordUserManageFormRef"
                  :model="ordUserManageForm"
                  :rules="rules"
                  class="ordUserManage-form"
                >
                  <el-row :gutter="20">
                    <el-col :span="12">
                      <el-form-item label="用户名" prop="User">
                        <el-input
                          v-model="ordUserManageForm.User"
                          placeholder="请输入"
                          class="input"
                        ></el-input>
                      </el-form-item>
                    </el-col>
                    <el-col :span="12">
                      <el-form-item label="账号" prop="Account">
                        <el-input
                          v-model="ordUserManageForm.Account"
                          placeholder="请输入"
                          class="input"
                        ></el-input>
                      </el-form-item>
                    </el-col>
                  </el-row>
                  <el-form-item label="手机号" prop="Phone">
                    <el-input
                      v-model="ordUserManageForm.Phone"
                      placeholder="请输入"
                      class="input"
                    ></el-input>
                  </el-form-item>
                </el-form>
  
                <div class="actions">
                  <el-button type="primary" @click="search" class="search-button">
                    查询
                  </el-button>
                  <el-button @click="reset" class="reset-button"> 重置 </el-button>
                  <el-button @click="refresh" class="refresh-button">
                    刷新
                  </el-button>
                </div>
              </div>
  
              <hr />
  
              <div class="button-container">
                <el-button type="primary" @click="create" class="create-button">
                  + 新建
                </el-button>
                <el-button
                  @click="bulkDelete"
                  class="bulkDelete-button white-button"
                >
                  批量删除
                </el-button>
                <el-button @click="bulkReset" class="bulkReset-button white-button">
                  批量重置
                </el-button>
                <el-button
                  @click="bulkAuthorization"
                  class="bulkAuthorization-button white-button"
                >
                  批量授权
                </el-button>
              </div>
  
              <div v-if="filteredMessages.length === 0" class="no-results">
                <p>未查询到此用户</p>
              </div>
  
              <div v-else>
                <el-table
                  :data="paginatedMessages"
                  @selection-change="handleSelectionChange"
                  style="width: 100%"
                >
                  <el-table-column type="selection" width="50"></el-table-column>
                  <el-table-column prop="UserName" label="用户名"></el-table-column>
                  <el-table-column prop="ID" label="账号"></el-table-column>
                  <el-table-column prop="PhoneNum" label="手机号"></el-table-column>
                  <el-table-column
                    prop="CreateDate"
                    label="创建时间"
                  ></el-table-column>
                  <el-table-column label="操作" width="200">
                    <template #default="scope">
                      <el-button
                        type="text"
                        @click="authorizeMessage(scope.row)"
                        class="bold-button"
                      >
                        授权
                      </el-button>
                      <el-button
                        type="text"
                        @click="resetMessage(scope.row)"
                        class="bold-button"
                      >
                        重置
                      </el-button>
                      <el-button
                        type="text"
                        @click="deleteMessage(scope.row)"
                        class="bold-button"
                      >
                        删除
                      </el-button>
                    </template>
                  </el-table-column>
                </el-table>
  
                <el-pagination
                  @size-change="handleSizeChange"
                  @current-change="handleCurrentChange"
                  :current-page="currentPage"
                  :page-sizes="[5, 10, 20, 50]"
                  :page-size="pageSize"
                  layout="total, sizes, prev, pager, next, jumper"
                  :total="totalMessages"
                >
                </el-pagination>
              </div>
            </div>
          </el-main>
        </div>
  
        <div v-if="selectedSection === 'dataRetrieval'">
          <p>数据检索</p>
        </div>
      </el-main>
    </el-container>
  </template> -->